import { Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
import React, { useState, useEffect } from 'react';
import { Tester, TestSuite, TestCase as _TestCase } from '@rnoh/testerino';
import { SmartManualTestCaseProps } from '@rnoh/testerino/src/react-native/ManualTestCase';
import DocumentPicker from "react-native-document-picker";
import FileViewer from "react-native-file-viewer";
import { Dirs, FileSystem } from 'react-native-file-access';
import { base64Img } from './img.json'

const openTest = async (option?: any): Promise<void> => {
  try {
    // 使用react-native-document-picker来选择本地文件进行打开
    const res: any = await DocumentPicker.pick({
      type: [DocumentPicker.types.allFiles]
    });
    // uri 为本地文件绝对路径
    await FileViewer?.open(res[0].uri, option);
  } catch (error) {
  }
};

export function FileViewerDemo() {
  const [sandboxPath, setSandboxPath] = useState('')
  useEffect(() => {
    FileSystem.writeFile(Dirs.DocumentDir + "/1.png", base64Img, "base64").then(() => {
      setSandboxPath(Dirs.DocumentDir + "/1.png");
    })
    return () => {

    };
  }, []);


  const openSandboxTest = async (option?: any): Promise<void> => {
    try {
      // uri 为本地文件绝对路径
      await FileViewer?.open(sandboxPath, option);
    } catch (error) {
    }
  };
  return (
    <ScrollView style={{ flex: 1, height: '100%' }}>
      <Tester>
        <TestSuite name="FileViewer">
          <TestCase
            itShould="filepath: sandboxPath"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <>
                <Text>sandboxPath: {sandboxPath}</Text>
                <TouchableOpacity
                  onPress={() => {
                    openSandboxTest().then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile</Text>
                </TouchableOpacity>
                </>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          <TestCase
            itShould="filepath: documentPath"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest().then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          <TestCase
            itShould="displayName string"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openSandboxTest('string').then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(displayName)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />

          <TestCase
            itShould="displayName object"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openSandboxTest({ displayName: 'object' }).then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(displayName)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />

          <TestCase
            itShould="showOpenWithDialog=true"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest({ showOpenWithDialog: true }).then(res => setState(res));
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(showOpenWithDialog)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          <TestCase
            itShould="showOpenWithDialog=false"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest({ showOpenWithDialog: false }).then(res => setState(res));
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(showOpenWithDialog)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />

          <TestCase
            itShould="onDismiss"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest({
                      showOpenWithDialog: true,
                      onDismiss: () => { setState(true) },
                    })
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(onDismiss)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />

          <TestCase
            itShould="showAppsSuggestions=true"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest({ showAppsSuggestions: true }).then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(showAppsSuggestions)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
          <TestCase
            itShould="showAppsSuggestions=false"
            initialState={undefined as any}
            arrange={({ setState }) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    openTest({ showAppsSuggestions: false }).then(res => setState(res))
                  }}
                  style={styles.btn}>
                  <Text style={styles.btnText}>OpenFile(showAppsSuggestions)</Text>
                </TouchableOpacity>
              );
            }}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
        </TestSuite>
      </Tester>
    </ScrollView>
  );
}

// TestCase
function TestCase<TState = undefined>({
  itShould,
  modal,
  initialState,
  arrange,
  assert,
}: {
  itShould: string;
  modal?: boolean;
  initialState: TState;
  arrange: SmartManualTestCaseProps<TState>['arrange'];
  assert: SmartManualTestCaseProps<TState>['assert'];
}) {
  return (
    <_TestCase
      itShould={itShould}
      modal={modal}
      initialState={initialState}
      arrange={arrange}
      assert={assert}
    />
  );
}

const styles = StyleSheet.create({
  TextInput: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    width: '90%',
  },
  btn: {
    borderRadius: 10,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    margin: 10,
    backgroundColor: 'blue',
  },
  btnText: { fontWeight: 'bold', color: '#fff', fontSize: 20 },
  selectBtn: {
    padding: 8,
    margin: 3,
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#753c13',
  },
  selectBtnActive: {
    padding: 8,
    margin: 3,
    backgroundColor: '#e2803b',
    fontSize: 18,
    borderRadius: 8,
    borderWidth: 1,
  },
});

export const displayName = "FileViewerDemo";
export const framework = "React";
export const category = "Basic";
export const title = "react-native-file-viewer";
export const documentationURL = "https://github.com/react-native-oh-library/react-native-file-viewer";
export const description = "React Native File Viewer";

export const examples = [
  {
    title: "react-native-file-viewer",
    render: function (): any {
      return <FileViewerDemo />;
    },
  },
];

